<template>
  <div class="contract-base">
    <a-spin :spinning="loading">
      <a-form-model
        style="margin-top: 20px"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="顾问姓名">
          <b>{{form.username}}</b>
        </a-form-model-item>
        <a-form-model-item label="创建时间">
          <b>{{form.created_at}}</b>
        </a-form-model-item>
        <a-form-model-item label="审核时间">
          <b>{{form.submit_check_time}}</b>
        </a-form-model-item>
        <a-form-model-item label="业务名称">
          <b>{{form.tm_name}}</b>
        </a-form-model-item>
        <a-form-model-item label="申请主体">
          <b>{{form.subject}}</b>
        </a-form-model-item>
        <a-form-model-item label="客户姓名">
          <b>{{form.customer_name}}</b>
        </a-form-model-item>
        <a-form-model-item label="纸质合同">
          <a-button icon="download" type="link" @click="downPdf(form.paper_contract_file)">点击下载纸质合同</a-button>
        </a-form-model-item>
        <a-form-model-item label="客户确认截图">
          <a @click="onPreview(form.customer_confirm)"><img :src="form.customer_confirm" width="80" height="80" /></a>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <a-modal v-model="previewVisible" :footer="null" @cancel="handleCancel">
      <img style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
  import { getContractBase } from '@/api/contract'

  export default {
    name: 'Base',
    data () {
      return {
        labelCol: { span: 3 },
        wrapperCol: { span: 7 },
        form: {},
        loading: true,
        previewVisible: false,
        previewImage: ''
      }
    },
    created () {
      getContractBase(this.$route.params.id).then(res => {
        this.form = res.result
      }).finally(() => {
        this.loading = false
      })
    },
    methods: {
      downPdf (url) {
        window.open(url)
      },
      onPreview (img) {
        this.previewImage = img
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      }
    }
  }
</script>

<style scoped>

</style>
